<template>
  <div class="income-container">
    <div class="chart" id="chart_left4"></div>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'

export default {
  name: "income",
  data() {
    return {
      recycleDate: {city:[],num:[]},
      wasteData:[{}],
      weekData:[],
      infectiousMwWeightData:[],
      traumaticMwWeightData:[],
      medicatedMwWeightData:[],
      pathologicalMwWeightData:[],
      chemicalMwWeightData:[]
    }
  },
  mounted() {
    // this.getEchartLeft3();
    this.getStatisticsData();
  },
  methods: {
    getStatisticsData() {
        let url = '/cxRecycleRecord/queryListRecycleMVRecycleByWeek'
        getAction( `${window._CONFIG['domianURL']}${url}`).then((res) => {
            console.log("[-----每周医疗废物医疗废物----]" , res.result)
            for (let i = 0; i < res.result.length; i++) {
              this.weekData.push(res.result[i].week);
              this.infectiousMwWeightData.push(res.result[i].infectiousMwWeight);
              this.traumaticMwWeightData.push(res.result[i].traumaticMwWeight);
              this.medicatedMwWeightData.push(res.result[i].medicatedMwWeight);
              this.pathologicalMwWeightData.push(res.result[i].pathologicalMwWeight);
              this.chemicalMwWeightData.push(res.result[i].chemicalMwWeight);
            }
           this.wasteData = res.result

            this.getEchartLeft4();
        })
      },

    getEchartLeft4() {
      let myChart = this.$echarts.init(document.getElementById('chart_left4'));
      // let data = {
      //   city: ['2015', '2016', '2017', '2018', '2019', '2020'],
      //   num: ['555', '896', '1935', '2922', '4508', '5000']
      // }
      let data = this.recycleDate
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(255,255,255,0)' // 0% 处的颜色
                }, {
                  offset: 0.5,
                  color: 'rgba(255,255,255,1)' // 100% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(255,255,255,0)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
          },
          formatter: (value) => {
            console.log("[-----value---------]",value);
            let res = '<div>感染性：' + value[0].value + '</div>' + '<div>损伤性：' + value[1].value + '</div>' + '<div>药物性：' + value[2].value + '</div>' + '<div>病理性：' + value[3].value + '</div>' + '<div>化学性：' + value[4].value + '</div>'
            return res;
          }
        },
        // legend:{
        //   data:['感染性','损伤性','药物性']
        // },
        grid: {
          top: '5%',
          left: '2%',
          right: '2%',
          bottom: '0%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: true,
          axisLine: { //坐标轴轴线相关设置。数学上的x轴
            show: false,
            lineStyle: {
              color: '#092b5d'
            },
          },
          axisLabel: { //坐标轴刻度标签的相关设置
            textStyle: {
              color: '#24c4ff',
              margin: 15,
            },
            formatter: (data) => {
                // return data.substr(2) + '周';
                return data + '周';
            }
          },
          axisTick: {
            show: false,
          },
          data: this.weekData
        }],
        yAxis: [{
          min: 0,
          // max: 2000,
          splitLine: {
            show: false,
            lineStyle: {
              color: '#092b5d'
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#092b5d"
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#24c4ff',
            }
          },
          axisTick: {
            show: false,
          },
        }],
        series: [{
          name: '感染性',
          type: 'line',
          symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
          showAllSymbol: true,
          symbolSize: 8,
          lineStyle: {
            normal: {
              color: '#7c80f4', // 线条颜色
            },
            borderColor: 'rgba(0,0,0,.4)',
          },
          itemStyle: {
             color: "#066CF0",
            borderColor: "#066CF0",
            borderWidth: 2,
          },
          label: {
            normal: {
              show: true,
              position: 'top',
              formatter: [
                ' {a|{c}}',
              ].join(','),
              rich: {
                a: {
                  color: '#00ffff',
                  align: 'center',
                },
              }
            }
          },
          smooth: true,
          areaStyle: { //区域填充样式
            normal: {
              //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: "rgba(124, 128, 244,.3)"
              },{
                offset: 1,
                color: "rgba(124, 128, 244, 0)"
              }], false),
              shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
              shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
            }
          },
          data: this.infectiousMwWeightData
        },{
          name: '损伤性',
          type: 'line',
          symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
          showAllSymbol: true,
          symbolSize: 8,
          lineStyle: {
            normal: {
              color: '#00d887', // 线条颜色
            },
            borderColor: 'rgba(0,0,0,.4)',
          },
          itemStyle: {
             color: "#066CF0",
            borderColor: "#066CF0",
            borderWidth: 2,
          },
          label: {
            normal: {
              show: true,
              position: 'top',
              formatter: [
                ' {a|{c}}',
              ].join(','),
              rich: {
                a: {
                  color: '#00ffff',
                  align: 'center',
                },
              }
            }
          },
          smooth: true,
          areaStyle: { //区域填充样式
            normal: {
              //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: "rgba(0, 216, 135,.3)"
              },{
                offset: 1,
                color: "rgba(0, 216, 135, 0)"
              }], false),
              shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
              shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
            }
          },
          data: this.traumaticMwWeightData
        },{
          name: '药物性',
          type: 'line',
          symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
          showAllSymbol: true,
          symbolSize: 8,
          lineStyle: {
            normal: {
              color: '#ed3f35', // 线条颜色
            },
            borderColor: 'rgba(0,0,0,.4)',
          },
          itemStyle: {
             color: "#066CF0",
            borderColor: "#066CF0",
            borderWidth: 2,
          },
          label: {
            normal: {
              show: true,
              position: 'top',
              formatter: [
                ' {a|{c}}',
              ].join(','),
              rich: {
                a: {
                  color: '#00ffff',
                  align: 'center',
                },
              }
            }
          },
          smooth: true,
          areaStyle: { //区域填充样式
            normal: {
              //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: "rgba(237, 63, 53,.3)"
              },{
                offset: 1,
                color: "rgba(237, 63, 53, 0)"
              }], false),
              shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
              shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
            }
          },
          data: this.medicatedMwWeightData
        },{
          name: '病理性',
          type: 'line',
          symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
          showAllSymbol: true,
          symbolSize: 8,
          lineStyle: {
            normal: {
              color: '#006ced', // 线条颜色
            },
            borderColor: 'rgba(0,0,0,.4)',
          },
          itemStyle: {
             color: "#066CF0",
            borderColor: "#066CF0",
            borderWidth: 2,
          },
          label: {
            normal: {
              show: true,
              position: 'top',
              formatter: [
                ' {a|{c}}',
              ].join(','),
              rich: {
                a: {
                  color: '#00ffff',
                  align: 'center',
                },
              }
            }
          },
          smooth: true,
          areaStyle: { //区域填充样式
            normal: {
              //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: "rgba(0, 108, 237,.3)"
              },{
                offset: 1,
                color: "rgba(0, 108, 237, 0)"
              }], false),
              shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
              shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
            }
          },
          data: this.pathologicalMwWeightData
        },{
          name: '化学性',
          type: 'line',
          symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
          showAllSymbol: true,
          symbolSize: 8,
          lineStyle: {
            normal: {
              color: '#eaea26', // 线条颜色
            },
            borderColor: 'rgba(0,0,0,.4)',
          },
          itemStyle: {
             color: "#066CF0",
            borderColor: "#066CF0",
            borderWidth: 2,
          },
          label: {
            normal: {
              show: true,
              position: 'top',
              formatter: [
                ' {a|{c}}',
              ].join(','),
              rich: {
                a: {
                  color: '#00ffff',
                  align: 'center',
                },
              }
            }
          },
          smooth: true,
          areaStyle: { //区域填充样式
            normal: {
              //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: "rgba(234, 234, 38,.3)"
              },{
                offset: 1,
                color: "rgba(234, 234, 38, 0)"
              }], false),
              shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
              shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
            }
          },
          data: this.chemicalMwWeightData
        }]
      }

      myChart.setOption(option, true);
      window.addEventListener('resize', () => {
        myChart.resize();
      })
    },
  },
  beforeDestroy() {

  }
};
</script>

<style lang="less" scoped>
.income-container {
  .chart {
    height: 20rem;
  }
}
</style>
